import React from "react";
import "antd-mobile/dist/antd-mobile.css";
import {CarOutlined} from "@ant-design/icons";
import "./index.css";
import PropTypes from "prop-types";

class ParkingSpace extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isSelected: false
        };
    }

    updateStatus = event => {
        this.setState({
            isSelected: !this.state.isSelected
        }, () => {
            this.props.setSelectedSpace(this.state.isSelected, this.props.space.parkingSpaceCode);
        });
    };

    render() {
        return (
            <div>
                <CarOutlined
                    style={{fontSize: "1.3rem", margin: "0.8rem", color: `${(this.props.isSelect && !this.props.space.status) ? "green" : ""}`}}
                    onClick={this.updateStatus}
                    className={`${this.props.space.status ? "Done" : "UnDone"}`}/>
                <div style={{fontSize: "0.7rem", textAlign: "center", color: `${(this.props.isSelect && !this.props.space.status) ? "green" : ""}`}}>{this.props.space.parkingSpaceCode}</div>
            </div>
        );
    }
}

ParkingSpace.propTypes = {
    setSelectedSpace: PropTypes.func.isRequired,
    isSelect: PropTypes.bool.isRequired,
    space: PropTypes.object.isRequired
};
export default ParkingSpace;